<template>
<view class="content">
    <tab 
        v-model="activeKey" 
        :navData="scrollData"
        @change="tabChange"
        @tabClick="tabClick"
    >
        
        <scroll-view scroll-y slot="slot-1" style="overflow:auto;height:1200rpx">
			<view class="repair">
				<view class="repair-list">
					<view  class="item" v-for="(meetr, index) in result" :key="index" @click="showdetails(meetr)">
						<view class="carrier">
							<view class="repair-wrapper">
								<view class="title in1line">
										<template >{{meetr.mtrName}}</template>
<!-- 									-
										<template >{{meetr.mtrState}}</template> -->
								</view>
								<view class="content in2line">{{meetr.mtrPos}}</view>
								<!-- <view class="time">张三 2020-12-12</view> -->
								<view class="sta">
									空闲
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 添加按钮 -->
<!-- 				<view class="add-round bg-deepBlue" :class="'bg-' + themeColor.name" @click="navTo(`/pages/examine/add`)">
					<text class="cuIcon-add text-xxl"></text>
				</view> -->
			</view>
        </scroll-view>
        <scroll-view scroll-y slot="slot-2" style="overflow:auto;height:1200rpx">
			<view class="repair">
				<view class="repair-list">
					<view  class="item" v-for="(meet, index) in result2" :key="index" @click="showdetails2(meet)">
						<view class="carrier">
							<view class="repair-wrapper">
								<view class="title in1line">
										<template >{{meet.mtTheme}}</template>
<!-- 									-
										<template >{{meet.mtDescription}}</template> -->
								</view>
								<view class="content in2line">{{meet.mtDescription}}</view>
								<view class="sta2">
									已预约
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 添加按钮 -->
				<view class="add-round bg-deepBlue" :class="'bg-' + themeColor.name" @click="navTo2(`/pages/meeting/mt_add`)">
					<text class="cuIcon-add text-xxl"></text>
				</view>
			</view>
        </scroll-view>
       
        <!-- AND -->
<!--        <view :slot="item.slot" v-for="(item,key) in scrollData" :key="key">
            <scroll-view scroll-y height="400rpx">
                第{{key+1}}页
            </scroll-view>
        </view> -->
    </tab>
</view>

</template>

<script>
import tab from '@/components/Mark-Tab/Tab.vue';
export default {
    data() {
        return {
            activeKey:0,
            scrollData:[
                {
                    label:'会议室列表',
                    slot:'slot-1'
                },
                {
                    label:'我的预约',
                    slot:'slot-2'
                }
            ],
			result: [],// 会议室列表的信息
			result2: [],// 会议列表的信息
        }
    },
	// onLoad: function( options ) {
	// 	var that = this;
	// 	wx.request({
	// 	  method: 'GET',
	// 	  url:'http://121.36.218.32:9887/clouddocument/mtr/1/5',
	// 	  success(res){
	// 		console.log(22222)
	// 		console.log(res.data)
	// 		that.setData({
	// 		  // boardroomList:res.data
	// 		})
	// 	  }
	//     })
	// },
	onLoad(){
		this.result = [];
		this.result2 = [];
		this.page = 1;
		this.getMeetroomList();
		this.getMeetList();
		// this.getData();
	},
	onShow() {
		this.initData();
	},
    components:{tab},
    methods: {
        tabChange(e){
            console.log(e);
        },
        tabClick(e){
            console.log(e);
        },
		// 数据初始化
		initData() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.themeColor.color,
				animation: {
					duration: 400,
					timingFunc: 'easeIn'
				}
			})
		},
		
		navTo(route) {
			this.$mRouter.push({
				route
			});
		},
		navTo2(route) {
			this.$mRouter.push({
				route
			});
		},
		// 点击跳转会议室信息详情页面
		showdetails(meetr) {
				  wx.navigateTo({
				  	url: `/pages/meeting/mtroom_detail?meetr=${JSON.stringify(meetr)}`
				  })
		},
		// 点击跳转会议信息详情页面
		showdetails2(meet) {
				  wx.navigateTo({
				  	url: `/pages/meeting/mt_detail?meet=${JSON.stringify(meet)}`
				  })
		},
		getMeetroomList(){
			var page = 1;
			var size = 100;
			var that = this;
			// var username=wx.getStorageSync('user');
			// username=JSON.parse(username).name
			const headers = {
				authentication: wx.getStorageSync('tokenStr') 
				// authentication:'4d58f6f9-0240-4e14-b50c-047d598493d7'
			};
			wx.request({
				url: `http://121.36.218.32:9887/clouddocument/mtr/${page}/${size}`,
				method: 'get',
				header: headers,
				// header: {
				// 	'content-type': '4094899d-d2a0-4067-9025-8aa7394bc160'
				// },
				success(resp) {
					console.log(resp.data.list)
					that.result = resp.data.list
				}
			})
		},
		getMeetList(){
			var page = 1;
			var size = 100;
			var that = this;
			// var username=wx.getStorageSync('user');
			// username=JSON.parse(username).name
			const headers = {
				authentication: wx.getStorageSync('tokenStr') 
				// authentication:'4d58f6f9-0240-4e14-b50c-047d598493d7'
			};
			wx.request({
				url: `http://121.36.218.32:9887/clouddocument/mt/${page}/${size}`,
				method: 'get',
				header: headers,
				// header: {
				// 	'content-type': '4094899d-d2a0-4067-9025-8aa7394bc160'
				// },
				success(resp) {
					console.log(resp.data.list)
					that.result2 = resp.data.list
				}
			})
		}
    },
}
</script>

<style lang="scss">
	page {
		background-color: $page-color-base;
	}
	
	.repair {
	
		.add-round {
			position: fixed;
			z-index: 999;
			right: 30rpx;
			bottom: 30rpx;
			border-radius: 50%;
			width: 120rpx;
			height: 120rpx;
			color: #fff;
			text-align: center;
			line-height: 120rpx;
			font-weight: 100;
			font-size: 80rpx;
		}
	
		.repair-list {
			margin-top: 20upx;
	
			.row {
				width: calc(94%);
				height: calc(22vw + 40upx);
				margin: 0 auto $spacing-base;
				border-radius: 15upx;
				box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.1);
				display: flex;
				align-items: center;
				position: relative;
				overflow: hidden;
				z-index: 4;
				border: 0;
	
				.carrier {
					@keyframes showMenu {
						0% {
							transform: translateX(0);
						}
	
						100% {
							transform: translateX(-30%);
						}
					}
	
					@keyframes closeMenu {
						0% {
							transform: translateX(-30%);
						}
	
						100% {
							transform: translateX(0);
						}
					}
	
					background-color: #fff;
					position: absolute;
					width: 100%;
					padding: 0 0;
					height: 100%;
					z-index: 3;
					display: flex;
					align-items: center;
				}
			}
	
			.repair-wrapper {
				background-color: $color-white;
				width: 100%;
				padding: $spacing-base $spacing-lg $spacing-base $spacing-lg;
				margin: $spacing-base 0 0;
				border-radius: 15upx;
				position: relative;
	
				.title {
					font-size: $font-lg;
					color: $font-color-dark;
					font-weight: 500;
					margin: 0 0 $spacing-sm;
				}
	
				.content {
					font-size: $font-sm;
					color: $font-color-base;
					height: 75upx;
					line-height: 36upx;
				}
	
				.time {
					font-size: $font-base;
					color: $font-color-light;
				}
	
			}
		}
	.sta{
		position: absolute;
		right: 60rpx;
		top: 40%;
		color: #39B54A;
	}
	.sta2{
		position: absolute;
		right: 60rpx;
		top: 40%;
		color: #E54D42;
	}
	}
</style>
